import { Tabs, Table, Button, Space, Tag, Image, Switch, Input, Select } from 'antd';
import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux'
import { getDrugslistFn, getOntheshelfFn, getNotheshelfFn, getNogoFn, updateOnshelfFn } from './../../../api/drugs'
import { getkindData, getKindfirst } from './../../../api/kind'
import { getSymData } from './../../../api/symptom'
import TimeShow from './../../../components/TimeShow'
const { TabPane } = Tabs;

const { Option } = Select;

const Drugmanage = (props) => {
    const [druglist, setDruglist] = useState([])
    const [kindlist, setkindlist] = useState(['请选择'])
    const [kinddata, setKindData] = useState({
        Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
        Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
    })
    const [cities, setCities] = useState([]);
    const [secondCity, setSecondCity] = useState("");
    useEffect(() => {
        getKindfirst().then(res1 => {
            getkindData().then(res2 => {
                setkindlist(res1.data.arr)
                setKindData(res2.data.data)
                setCities(res2.data.data[res1.data.arr[0]]);
                setSecondCity(res2.data.data[res1.data.arr[0]][0]);
            })
        })
    }, [])

    const [selectedRowKeys, setSeletRowKeys] = useState([])
    const onSelectChange = (selectedRowKeys, selectedRow) => {
        setSeletRowKeys(selectedRowKeys);
    }
    const rowSelection = {
        selectedRowKeys, //当前页面选中的项
        onChange: onSelectChange, //获取选中的值
    }
    const callback = (key) => {
        if (key === '1') {
            getDrugslistFn().then(res => {
                setDruglist(res.data.data)
            })
        } else if (key === '2') {
            getOntheshelfFn().then(res => {
                setDruglist(res.data.data)
            })
        } else if (key === '3') {
            getNotheshelfFn().then(res => {
                setDruglist(res.data.data)
            })
        } else if (key === '4') {
            getNogoFn().then(res => {
                setDruglist(res.data.data)
            })
        }
    }
    const columns = [
        {
            title: '药品名称',
            align: 'center',
            dataIndex: 'drugname',
        },
        {
            title: '列表图',
            align: 'center',
            dataIndex: 'listimg',
            render: (text, record, next) => {
                return <Image src={text} width={70}></Image>
            }
        },
        {
            align: 'center',
            title: '价格',
            dataIndex: 'drugPrice',
        },
        {
            align: 'center',
            title: '上架',
            dataIndex: 'isOntheshelf',
            render: (text, record, index) => {
                return <Switch
                    checked={text}
                    defaultChecked
                    onChange={(checked) => {
                        console.log(checked, index);
                        updateOnshelfFn({
                            drugid: record.drugid,
                            isOntheshelf: checked,
                        }).then((res) => {
                            console.log(res)
                            // const arr = activitys;
                            let arr = JSON.parse(JSON.stringify(druglist));
                            arr[index].isOntheshelf = checked;
                            console.log(arr)
                            setDruglist(arr);
                        });
                    }}
                />
            }
        },

        {
            align: 'center',
            title: '是否为处方',
            dataIndex: 'isPrescription',
            render: text => text ? <span>是</span> : <span>否</span>
        },
        {
            align: 'center',
            title: '审核状态',
            dataIndex: 'auditStatus',
            render: text => {
                if (text === 0) {
                    return <span>待审核</span>
                } else if (text === 1) {
                    return <span>审核未通过</span>
                } else {
                    return <span>审核通过</span>
                }
            }
        },
        {
            align: 'center',
            title: '库存',
            dataIndex: 'stock',
        },
        {
            align: 'center',
            title: '发布时间',
            dataIndex: 'createTime',
            render: (text, record, index) => {
                return TimeShow({ time: text })
            }
        },
        {
            align: 'center',
            title: '操作',
            render: (text, record, index) => {
                return <Space>
                    <Tag color="#f50" >查看</Tag>
                    <Tag color="#f50" >编辑</Tag>
                    <Tag color="#f50">删除</Tag>
                </Space>
            }

        }
    ]

    const data = druglist
    // 联动的数据
    const handleProvinceChange = value => {

        setCities(kinddata[value]);
        setSecondCity(kinddata[value][0]);
    };

    const onSecondCityChange = value => {
        setSecondCity(value);
    };
    return (
        <div>
            <div> <h1>药品管理</h1></div>
            <div className="tabledrug">
                <div>
                    <Space>
                        <Input placeholder="输入药名" width={60} size="middle" />
                        药品分类
                        <Select defaultValue={kindlist[0]} style={{ width: 120 }} onChange={handleProvinceChange}>
                            {kindlist.map(province => (
                                <Option key={province}>{province}</Option>
                            ))}
                        </Select>
                        <Select style={{ width: 120 }} value={secondCity} onChange={onSecondCityChange}>
                            {cities.map(city => (
                                <Option key={city}>{city}</Option>
                            ))}
                        </Select>
                        {/* 症状 */}
                        症状
                        {/* <Select defaultValue={provinceData[0]} style={{ width: 120 }} onChange={handleProvinceChange}>
                            {provinceData.map(province => (
                                <Option key={province}>{province}</Option>
                            ))}
                        </Select>
                        <Select style={{ width: 120 }} value={secondCity} onChange={onSecondCityChange}>
                            {cities.map(city => (
                                <Option key={city}>{city}</Option>
                            ))}
                        </Select> */}
                        <button style={{ backgroundColor: "red", color: 'white', border: "none", padding: "5px" }}>筛选</button>
                    </Space>
                </div>

            </div>
            <div>
                <div className="drugman">
                    <span>数据列表</span>
                    <Button onClick={() => { props.history.push('/drugs/addDrugs') }}>新增药品</Button>
                </div>
                <div className="Tabscss">
                    <Tabs defaultActiveKey="1" onChange={callback}>
                        <TabPane tab="全部" key="1">
                            <div>
                                <Table
                                    rowSelection={rowSelection}
                                    columns={columns}
                                    dataSource={data}
                                    rowKey={record => record.drugid}
                                />
                            </div>
                        </TabPane>
                        <TabPane tab="已上架" key="2">
                            <div>
                                <Table
                                    rowSelection={rowSelection}
                                    columns={columns}
                                    dataSource={data}
                                    rowKey={record => record.drugid}
                                />
                            </div>
                        </TabPane>
                        <TabPane tab="未上架" key="3">
                            <div>
                                <Table
                                    rowSelection={rowSelection}
                                    columns={columns}
                                    dataSource={data}
                                    rowKey={record => record.drugid}
                                />
                            </div>
                        </TabPane>
                        <TabPane tab="审核未通过" key="4">
                            <div>
                                <Table
                                    rowSelection={rowSelection}
                                    columns={columns}
                                    dataSource={data}
                                    rowKey={record => record.drugid}
                                />
                            </div>
                        </TabPane>
                    </Tabs>
                </div>
            </div>

        </div>
    )
}
export default connect(state => ({//设置状态 获取这些值
    truename: state.getIn(['user', 'truename']) //获取用户名
}), dispatch => ({

}))(Drugmanage)
